import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, ActivityIndicator} from 'react-native';

export default class extends PureComponent {
    static defaultProps = {
        footerRefreshingText: "努力加载中",
        footerNoMoreDataText: "已全部加载完毕"
    };

    render() {
        let {isFetching, hasMore} = this.props;
        const {footerRefreshingText, footerNoMoreDataText} = this.props;
        let footer = null;
        if (isFetching) {
            if (!hasMore) {
                footer =
                    <View style={styles.loadingView}>
                        <Text style={styles.footerText}>{footerNoMoreDataText}</Text>
                    </View>;
            } else {
                footer =
                    <View style={styles.loadingView}>
                        <ActivityIndicator size="small"/>
                        <Text style={styles.refreshingText}>{footerRefreshingText}</Text>
                    </View>;
            }
        }
        return footer;
    }
}

const styles = StyleSheet.create({
    loadingView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: 16
    },
    refreshingText: {
        fontSize: 12,
        color: "#666666",
        paddingLeft: 10
    },
    footerText: {
        fontSize: 12,
        color: "#666666"
    }
});
